<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
<link href="css/js_example_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Hello OpenCV.js</h2>
<p id="status">OpenCV.js is loading...</p>
<div>
    <table cellpadding="0" cellspacing="0" width="0" border="0">
    <tr>
        <td>
            <img id="imageSrc" alt="No Image" class="small" />
        </td>
        <td>
            <canvas id="canvasOutput" class="small" height="300px"></canvas>
        </td>
    </tr>
    <tr>
        <td>
            <div class="caption">imageSrc <input type="file" id="fileInput" name="file" accept="image/*" /></div>
        </td>
        <td>
            <div class="caption">canvasOutput</div>
        </td>
    </tr>
    </table>
</div>
<script src="js/utils.js" type="text/javascript"></script>
<script type="text/javascript">
let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', (e) => {
    imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);

imgElement.onload = function() {
    let mat = cv.imread(imgElement);
	 mat = bilateralFilter(mat, 4, 3);
    cv.imshow('canvasOutput', mat);
    mat.delete();
};

//磨皮
function bilateralFilter(image, value1, value2) {
 
            let dst = new cv.Mat();
            if (value1 == null || value1 == undefined) value1 = 3; //磨皮系数
            if (value2 == null || value2 == undefined) value2 = 1; //细节系数 0.5 - 2
 
            var dx = value1 * 5; //双边滤波参数
            var fc = value1 * 12.5; //参数
            var p = 0.1; //透明度
 
            let temp1 = new cv.Mat(),
                temp2 = new cv.Mat(),
                temp3 = new cv.Mat(),
                temp4 = new cv.Mat();
 
            cv.cvtColor(image, image, cv.COLOR_RGBA2RGB, 0);
 
            cv.bilateralFilter(image, temp1, dx, fc, fc); //bilateralFilter(Src)
 
            let temp22 = new cv.Mat();
            cv.subtract(temp1, image, temp22); //bilateralFilter(Src) - Src
 
            cv.add(temp22, new cv.Mat(image.rows, image.cols, image.type(), new cv.Scalar(128, 128, 128, 128)), temp2); //bilateralFilter(Src) - Src + 128
 
            cv.GaussianBlur(temp2, temp3, new cv.Size(2 * value2 - 1, 2 * value2 - 1), 0, 0);
            //2 * GuassBlur(bilateralFilter(Src) - Src + 128) - 1
 
            let temp44 = new cv.Mat();
            temp3.convertTo(temp44, temp3.type(), 2, -255);
            //2 * GuassBlur(bilateralFilter(Src) - Src + 128) - 256
 
            cv.add(image, temp44, temp4);
            cv.addWeighted(image, p, temp4, 1 - p, 0.0, dst);
            //Src * (100 - Opacity)
 
            cv.add(dst, new cv.Mat(image.rows, image.cols, image.type(), new cv.Scalar(10, 10, 10, 0)), dst);
            //(Src * (100 - Opacity) + (Src + 2 * GuassBlur(bilateralFilter(Src) - Src + 128) - 256) * Opacity) /100
 
            return dst;
        }

function onOpenCvReady() { // eslint-disable-line no-unused-vars
    document.getElementById('status').innerHTML = '<b>OpenCV.js is ready</b>.' +
        'You can upload an image.<br>' +
        'The <b>imageSrc</b> is a &lt;img&gt; element used as cv.Mat input. ' +
        'The <b>canvasOutput</b> is a &lt;canvas&gt; element used as cv.Mat output.';
}

function onOpenCvError() { // eslint-disable-line no-unused-vars
    let element = document.getElementById('status');
    element.setAttribute('class', 'err');
    element.innerHTML = 'Failed to load opencv.js';
}

</script>
<script async src="js/opencv.js" type="text/javascript" onload="onOpenCvReady();" onerror="onOpenCvError();"></script>
</body>
</html>
